<template>
  <div class="parse-block-page" :class="{ 'pdf-layout': isPdfType }">
    <!-- 添加顶部导航和操作栏 -->
         <div style="display: none;">   {{pdfUrl}}</div>

    <div class="page-header">
      <div class="back-navigation">
        <el-button icon="Back" link @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <div class="document-info">
          <el-icon><Document /></el-icon>
          <span class="document-name">{{ fileName }}</span>
        </div>
      </div>
      
      <!-- 右上角操作栏 - 根据您的图片添加 -->
      <div class="action-toolbar">
        <div class="view-mode-buttons">
          <el-button-group>
            <el-button :type="viewMode === 'full' ? 'primary' : ''" @click="viewMode = 'full'">全文</el-button>
            <el-button :type="viewMode === 'summary' ? 'primary' : ''" @click="viewMode = 'summary'">省略</el-button>
          </el-button-group>
        </div>
        
        <el-dropdown trigger="hover" class="batch-dropdown" hide-on-click="false">
          <el-button>
            批量 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="custom-batch-menu">
              <!-- 选择所有 -->
              <el-dropdown-item class="select-all-item" @click.stop="toggleSelectAll">
                <el-checkbox
                  :model-value="isAllSelected"
                  style="margin-right: 8px; pointer-events: none;"
                />
                选择所有
              </el-dropdown-item>
              <el-dropdown-item divided disabled style="height: 0; padding: 0; margin: 0;" />
              <!-- 启用选定的 -->
              <!-- <el-dropdown-item @click="handleBatchEnable(true)">
                <el-icon class="batch-menu-icon enable"><CircleCheck /></el-icon>
                启用选定的
              </el-dropdown-item> -->
              <!-- 禁用选定的 -->
              <!-- <el-dropdown-item @click="handleBatchEnable(false)">
                <el-icon class="batch-menu-icon disable"><CircleClose /></el-icon>
                禁用选定的
              </el-dropdown-item> -->
              <!-- 删除选定的 -->
              <el-dropdown-item @click="handleBatchDelete" divided>
                <el-icon class="batch-menu-icon delete"><Delete /></el-icon>
                删除选定的
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <div class="search-bar-wrapper">
          <el-button
            v-if="!searchActive"
            icon="Search"
            circle
            @click="activateSearch"
            class="search-btn"
          ></el-button>
          <el-input
            v-else
            v-model="queryParams.keywords"
            prefix-icon="Search"
            placeholder="搜索"
            class="search-input-bar"
            ref="searchInputRef"
            @blur="deactivateSearch"
            @input="handleSearch"
            clearable
          />
        </div>
        
        <!-- <el-dropdown trigger="click" class="menu-dropdown">
          <el-button icon="Menu" circle></el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleExport">导出</el-dropdown-item>
              <el-dropdown-item @click="handleRefresh">刷新</el-dropdown-item>
              <el-dropdown-item @click="handleSettings">设置</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        
        <el-button type="primary" icon="Plus" circle @click="handleAddBlock"></el-button>
      </div>
    </div>

    <!-- 搜索抽屉 -->
    <el-drawer
      v-model="searchVisible"
      title="搜索块内容"
      direction="rtl"
      size="350px"
    >
      <div class="search-container">
        <el-input 
          v-model="queryParams.keywords" 
          placeholder="输入关键词搜索" 
          clearable
          prefix-icon="Search"
          @keyup.enter="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch" style="margin-top: 15px">搜索</el-button>
      </div>
    </el-drawer>

    <template v-if="isPdfType">
      <div class="pdf-main">
        <!-- 左侧：块列表 -->
        <div class="pdf-left">
          <div class="parse-block-list custom-block-list">
            <div
              v-for="(block, idx) in blockList"
              :key="block.id || block.chunk_id || idx"
              class="card-block"
            >
              <div class="block-row">
                <el-checkbox
                  v-model="block._checked"
                  @change="handleSingleCheck(block)"
                  class="block-checkbox"
                />
                <div class="block-content">
                  <div class="block-text" :class="{ 'text-truncated': viewMode === 'summary' }">
                    {{ block.content }}
                  </div>
                </div>
                <el-switch
                  v-model="block.available"
                  class="block-switch"
                  :loading="block.enableLoading"
                  @change="val => handleEnableChange(val, block)"
                />
              </div>
            </div>
          </div>
          <div class="pagination-footer">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 右侧：PDF预览 -->
        <div class="pdf-right">
          <iframe
            v-if="pdfUrl"
            :src="pdfUrl"
            frameborder="0"
            class="pdf-iframe"
          ></iframe>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- 非PDF类型，原有内容 -->
      <!-- 块列表 -->
      <div class="parse-block-list custom-block-list">
        <div
          v-for="(block, idx) in blockList"
          :key="block.id || block.chunk_id || idx"
          class="card-block"
        >
          <div class="block-row">
            <el-checkbox
              v-model="block._checked"
              @change="handleSingleCheck(block)"
              class="block-checkbox"
            />
            <div v-if="isImageType" class="block-image-thumb">
              <img
                v-if="block.url"
                :src="block.url"
                alt="图片"
                class="block-thumb-img"
              />
            </div>
            <div class="block-content">
              <div class="block-text" :class="{ 'text-truncated': viewMode === 'summary' }">
                {{ block.content }}
              </div>
            </div>
            <el-switch
              v-model="block.available"
              class="block-switch"
              :loading="block.enableLoading"
              @change="val => handleEnableChange(val, block)"
            />
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-footer">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 添加/编辑块对话框 -->
      <el-dialog
        v-model="blockDialogVisible"
        :title="isEditMode ? '编辑块' : '创建 解析块'"
        width="600px"
      >
        <el-form :model="blockForm" label-width="80px">
          <el-form-item label="解析块" required>
            <el-input
              v-model="blockForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入解析块内容"
            ></el-input>
          </el-form-item>
          <!-- 关键词 -->
          <el-form-item label="关键词">
            <div>
              <el-tag
                v-for="(tag, idx) in blockForm.important_keywords"
                :key="tag"
                closable
                @close="removeKeyword(idx)"
                style="margin-right: 4px;"
              >{{ tag }}</el-tag>
              <el-input
                v-if="keywordInputVisible"
                v-model="keywordInput"
                size="small"
                style="width: 120px;"
                @keyup.enter="addKeyword"
                @blur="addKeyword"
                ref="keywordInputRef"
              />
              <el-button
                v-else
                icon="Plus"
                size="small"
                @click="showKeywordInput"
              ></el-button>
            </div>
          </el-form-item>
          <!-- 问题 -->
          <el-form-item label="问题">
            <div>
              <el-tag
                v-for="(tag, idx) in blockForm.questions"
                :key="tag"
                closable
                @close="removeQuestion(idx)"
                style="margin-right: 4px;"
              >{{ tag }}</el-tag>
              <el-input
                v-if="questionInputVisible"
                v-model="questionInput"
                size="small"
                style="width: 120px;"
                @keyup.enter="addQuestion"
                @blur="addQuestion"
                ref="questionInputRef"
              />
              <el-button
                v-else
                icon="Plus"
                size="small"
                @click="showQuestionInput"
              ></el-button>
            </div>
          </el-form-item>
          <el-form-item label="启用">
            <el-switch v-model="blockForm.available" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="blockDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveBlock">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { 
  Document, 
  ArrowLeft, 
  ArrowDown, 
  Search, 
  Plus, 
  Edit, 
  Delete,
  Menu,
  CircleCheck,
  CircleClose
} from '@element-plus/icons-vue';
import { listChunk,updateChunk,deleteChunk,addChunk } from "@/api/knowledge/dataset";
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const datasetId = computed(() => route.query.dataset_id);

const fileName = ref(route.query.name || "文件详情");
const documentId = ref(route.query.document_id);
console.log(datasetId.value,documentId.value);

// 视图模式：full - 全文, summary - 省略
const viewMode = ref('full');
// 搜索相关
const searchVisible = ref(false);
const searchkeywords = ref('');
const queryParams = ref({
  dataset_id: datasetId.value,
  document_id: documentId.value,
  pageNum: 1,
  pageSize: 10,
  keywords: "",
});
// 表格相关
const blockTableRef = ref(null);
const selectedBlocks = ref([]);

// 示例数据，实际应根据documentId请求接口获取
const blockList = ref([]);
const total = ref(0);
// 对话框相关
const blockDialogVisible = ref(false);
const isEditMode = ref(false);
const blockForm = ref({
  content: "",
  important_keywords: [],
  questions: [],
  available: true
});

const keywordInput = ref("");
const keywordInputVisible = ref(false);
const keywordInputRef = ref(null);

const questionInput = ref("");
const questionInputVisible = ref(false);
const questionInputRef = ref(null);

// 返回上一页
function goBack() {
  router.go(-1);
}
// 获取列表
const getChunkList = () => {
    const listParams = {
      dataset_uuid: datasetId.value,
      document_uuid: documentId.value,
      pageSize: queryParams.value.pageSize, // 设置较大的页面大小以获取所有分块
      pageNum: queryParams.value.pageNum,
      keywords: queryParams.value.keywords
    };
    console.log(listParams,'llll')
  listChunk(listParams).then(res => {
    if (res.code === 200) {
      total.value = res.data.total;
      pdfUrl.value = res.data.doc?.url;
      blockList.value = (res.data?.chunks || []).map(b => ({
        ...b,
        url:res.data.doc?.url,
        _checked: false,
        enableLoading: false
      }));
    }
  });
}
// 处理选择变化
function handleSelectionChange(selection) {
  selectedBlocks.value = selection;
}

// 批量启用/禁用
function handleBatchEnable(status) {
  if (selectedBlocks.value.length === 0) {
    ElMessage.warning('请先选择要操作的块');
    return;
  }
  
  selectedBlocks.value.forEach(block => {
    block.available = status;
  });
  
  ElMessage.success(`已${status ? '启用' : '禁用'}所选${selectedBlocks.value.length}项`);
}

// 批量删除
function handleBatchDelete() {
  console.log(selectedBlocks.value,'selectedBlocks.value')
  if (selectedBlocks.value.length === 0) {
    ElMessage.warning('请先选择要删除的块');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除所选的 ${selectedBlocks.value.length} 个块吗？删除后不可恢复。`, '删除确认')
    .then(() => {
      // const loadingInstance = ElLoading.service({
      //   text: '批量删除中...',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      
      // 假设API使用的字段名是chunk_id
      const chunkIds = selectedBlocks.value.map(block => block.id || block.id);
      
      const deleteData = {
        chunk_ids: chunkIds,
        dataset_uuid: datasetId.value,
        document_uuid: documentId.value
      };
      deleteChunk(deleteData)
        .then(response => {
          if (response.code === 200) {
            ElMessage.success(`成功删除 ${chunkIds.length} 个块`);
            
            // 重新获取数据
            getChunkList();
          } else {
            ElMessage.error(response.msg || '批量删除失败');
          }
        })
        .catch(error => {
          console.error('批量删除失败:', error);
          ElMessage.error('批量删除失败');
        })
        .finally(() => {
          // loadingInstance.close();
        });
    });
}

// 添加块
function handleAddBlock() {
  isEditMode.value = false;
  blockForm.value = {
    content: "",
    important_keywords: [],
    questions: [],
    available: true
  };
  blockDialogVisible.value = true;
}

// 编辑块
function handleEditBlock(row) {
  isEditMode.value = true;
  blockForm.value = {
    content: row.content,
    important_keywords: row.important_keywords,
    questions: row.questions,
    available: row.available
  };
  blockDialogVisible.value = true;
}

// 删除块
function handleDeleteBlock(row) {
  ElMessageBox.confirm(`确定要删除此块吗？删除后不可恢复。`, '删除确认')
    .then(() => {
      // 实际应用中，这里应该调用API删除
      blockList.value = blockList.value.filter(block => block.id !== row.id);
      ElMessage.success('删除成功');
    })
    .catch(() => {});
}

// 保存块
async function saveBlock() {
  if (!blockForm.value.content.trim()) {
    ElMessage.warning('解析块内容不能为空');
    return;
  }
  
  // 组装参数
  const params = {
    content: blockForm.value.content,
    important_keywords: blockForm.value.important_keywords,
    questions: blockForm.value.questions,
    available: blockForm.value.available,
    dataset_uuid: datasetId.value,
    document_uuid: documentId.value
  };
  
  // 调用 addChunk
  const res = await addChunk(params);
  if (res.code === 200) {
    ElMessage.success('添加成功');
    blockDialogVisible.value = false;
    getChunkList();
  } else {
    ElMessage.error(res.msg || '添加失败');
  }
}

// 处理搜索
function handleSearch() {
  // if (!queryParams.value.keywords.trim()) {
  //   ElMessage.warning('请输入搜索关键词');
  //   return;
  // }
  
  // console.log(queryParams.value.keywords,'queryParams.value.keywords')
  // 在实际应用中，这里应该调用API进行搜索
  // ElMessage.success(`正在搜索: ${queryParams.value.keywords}`);
  // 这里只是模拟搜索效果
  getChunkList();
  
  searchVisible.value = false;
}

// 导出
function handleExport() {
  ElMessage.info('导出功能开发中');
}

// 刷新
function handleRefresh() {
  // 实际应用中，这里应该重新调用API获取数据
  ElMessage.success('数据已刷新');
}

// 设置
function handleSettings() {
  ElMessage.info('设置功能开发中');
}

// 页面大小变化
function handleSizeChange(size) {
  queryParams.value.pageSize = size;
  // queryParams.value.pageNum = 1;
  getChunkList();
}

// 当前页变化
function handleCurrentChange(page) {
  console.log(page,'page')
  queryParams.value.pageNum = page;
  getChunkList();
}

// 多选逻辑（可选，按需扩展）
function handleSingleCheck(block) {
  // 更新 selectedBlocks
  selectedBlocks.value = blockList.value.filter(b => b._checked);
  // "选择所有"复选框会自动联动，因为 isAllSelected 是 computed
}

const isAllSelected = computed(() => {
  return blockList.value.length > 0 && blockList.value.every(b => b._checked);
});

function toggleSelectAll() {
  const target = !isAllSelected.value;
  blockList.value.forEach(b => b._checked = target);
  if (target) {
    selectedBlocks.value = [...blockList.value];
  } else {
    selectedBlocks.value = [];
  }
}

// 数据变化时自动同步
watch(blockList, (newList) => {
  selectedBlocks.value = newList.filter(b => b._checked);
}, { deep: true });

const searchActive = ref(false);
const searchValue = ref("");
const searchInputRef = ref(null);

function activateSearch() {
  searchActive.value = true;
  nextTick(() => {
    // 自动聚焦输入框
    if (searchInputRef.value && searchInputRef.value.focus) {
      searchInputRef.value.focus();
    }
  });
}
function deactivateSearch() {
  searchActive.value = false;
  // queryParams.value.keywords = searchValue.value;
}

function showKeywordInput() {
  keywordInputVisible.value = true;
  nextTick(() => keywordInputRef.value && keywordInputRef.value.focus());
}
function addKeyword() {
  const val = keywordInput.value.trim();
  if (val && !blockForm.value.important_keywords.includes(val)) {
    blockForm.value.important_keywords.push(val);
  }
  keywordInput.value = "";
  keywordInputVisible.value = false;
}
function removeKeyword(idx) {
  blockForm.value.important_keywords.splice(idx, 1);
}

function showQuestionInput() {
  questionInputVisible.value = true;
  nextTick(() => questionInputRef.value && questionInputRef.value.focus());
}
function addQuestion() {
  const val = questionInput.value.trim();
  if (val && !blockForm.value.questions.includes(val)) {
    blockForm.value.questions.push(val);
  }
  questionInput.value = "";
  questionInputVisible.value = false;
}
function removeQuestion(idx) {
  blockForm.value.questions.splice(idx, 1);
}

// 启用/禁用切换逻辑
function handleEnableChange(val, block) {
  const oldVal = !val;
  block.enableLoading = true;
  // 组装 updateChunk 参数
  const params = {
    chunk_id: block.id || block.chunk_id,
    content: block.content,
    dataset_uuid: block.dataset_uuid || datasetId.value,
    document_uuid: block.document_uuid || documentId.value,
    important_keywords: block.important_keywords,
    questions: block.questions,
    available: val
  };
  updateChunk(params)
    .then(res => {
      if (res.code !== 200) {
        block.available = oldVal; // 回滚
        ElMessage.error(res.msg || "操作失败");
      }
    })
    .catch(() => {
      block.available = oldVal; // 回滚
      ElMessage.error("操作失败");
    })
    .finally(() => {
      block.enableLoading = false;
    });
}

const isImageType = computed(() => {
  // 根据实际业务判断是否为图片类型
  // 例如：路由参数 fileType === 'image'
  //  通过route.query.name  后缀判断类型
  const name = route.query.name;  
  if (name) {
    const ext = name.split('.').pop();
    return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext.toLowerCase());
  }
  return false;
});

function getImageUrl(image_id) {
  // 根据实际接口拼接图片URL
  if (!image_id) return '';
  return `/api/image/preview/${image_id}`;
}

const isPdfType = computed(() => {
  const name = route.query.name;
  if (name) {
    const ext = name.split('.').pop();
    return ext && ext.toLowerCase() === 'pdf';
  }
  return false;
});
const pdfUrl = ref('');
//  computed(() => {
//   // 实际接口请替换
//   return documentId.value ? `/api/pdf/preview/${documentId.value}` : '';
// });

onMounted(() => {
  // TODO: 根据documentId请求解析块数据，赋值blockList和total
  getChunkList();
  console.log(documentId.value,'888')
});
</script>

<style scoped>
.parse-block-page {
  padding: 20px;
  background: #fff;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.back-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}

.document-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}

.document-name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右上角操作工具栏 */
.action-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-mode-buttons {
  margin-right: 8px;
}

.batch-dropdown, .menu-dropdown {
  margin: 0 4px;
}

.parse-block-list {
  flex: 1;
  overflow: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;

}

.custom-block-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  background: transparent;
}

.card-block {
  background: #fff;
  border-radius: 12px;
  /* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06); */
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  border: 1px solid rgba(112,107,107,.15);
}

.card-block:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
}

.block-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.block-checkbox {
  margin-top: 4px;
}

.block-content {
  flex: 1;
  min-width: 0;
}

.block-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: 15px;
  color: #222;
}

.text-truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3em;
}

.block-switch {
  margin-top: 2px;
}

.operation-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 0 0;
  /* background: transparent; */
  position: fixed;
  bottom: 30px;
  background: #fff;
  /* width: 100%;
  z-index: 1000; */
}

/* 搜索抽屉样式 */
.search-container {
  padding: 20px;
}

/* 对话框样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.custom-batch-menu) {
  min-width: 200px;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10) !important;
  background: #fff !important;
  padding: 8px 0;
}
:deep(.custom-batch-menu .el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  font-size: 15px;
  padding: 10px 20px;
  color: #222;
}
:deep(.custom-batch-menu .el-dropdown-menu__item .el-checkbox) {
  margin-right: 8px;
}
:deep(.custom-batch-menu .el-dropdown-menu__item .batch-menu-icon) {
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
}
:deep(.custom-batch-menu .el-dropdown-menu__item.enable .batch-menu-icon) {
  color: #67c23a;
}
:deep(.custom-batch-menu .el-dropdown-menu__item.disable .batch-menu-icon) {
  color: #f56c6c;
}
:deep(.custom-batch-menu .el-dropdown-menu__item.delete .batch-menu-icon) {
  color: #909399;
}
:deep(.custom-batch-menu .el-dropdown-menu__item:hover) {
  background: #f5f7fa !important;
  color: #1677ff;
}
:deep(.custom-batch-menu .select-all-item) {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
:deep(.custom-batch-menu .select-all-item:hover) {
  background: #f5f7fa !important;
  color: #1677ff;
}
:deep(.custom-batch-menu .el-dropdown-menu__item.is-disabled) {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* 样式优化，参考图片 */
.search-bar-wrapper {
  display: flex;
  align-items: center;
  min-width: 40px;
}
.search-btn {
  margin-right: 0;
}
.search-input-bar {
  width: 220px;
  border-radius: 6px;
  transition: width 0.2s;
}
:deep(.search-input-bar .el-input__wrapper) {
  border-radius: 6px;
  padding-left: 8px;
}

/* 关键词/问题标签输入区样式优化 */
:deep(.el-form-item__content > div) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.block-image-thumb {
  width: 60px;
  height: 48px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #f5f5f5;
  overflow: hidden;
}
.block-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.pdf-layout .pdf-main {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 84px);
  background: #fff;
}
.pdf-layout .pdf-left {
  flex: 1;
  /* min-width: 320px;
  max-width: 600px; */
  border-right: 1px solid #eee;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 77vh;
}
.pdf-layout .pdf-right {
  flex: 1;
  background: #f7f7f7;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  overflow: auto;
}
.pdf-layout .pdf-iframe {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  border: none;
  background: #fff;
}
</style> 